<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <include file="./Public/Admin/header.html" />
    <script type="text/javascript" src="__PUBLIC__js/jquery_wookmark_min.js?2013-10-15-2"></script>
    <script type="text/javascript" src="__PUBLIC__js/masonry.pkgd.min.js?2013-10-15-2"></script>
    <script type="text/javascript" src="__PUBLIC__js/jquery_imagesloaded.js?2013-10-15-2"></script>
    <script type="text/javascript" src="__PUBLIC__js/jquery.pagination.js?2013-10-15-2"></script>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__css/emotion.css?2013-10-15-2" media="all" />
    <script type="text/javascript" src="__PUBLIC__js/emotion.js?2013-10-15-2"></script>
</head>
<body>
<div id="main">
    <div class="container-fluid">

        <div class="row-fluid">
            <div class="span12">
                <div class="box">
                    <div class="box-title">
                        <div class="span10">
                            <h3><i class="icon-edit"></i>编辑关键词</h3>
                        </div>
                        <div class="span2"><a class="btn" href="Javascript:window.history.go(-1)">返回</a></div>
                    </div>

                    <div class="box-content">

                        <form action="{:U('Admin/Wechat/editkeyword')}" method="post" class="form-horizontal form-validate">
                            <div class="alert" style="display:none">
                                <strong>请选择回复素材!</strong>
                            </div>
                            <div class="control-group">
                                <label for="keyname" class="control-label">关键词：</label>
                                <div class="controls">
                                    <input type="text" name="keyname" id="keyname" class="input-medium" data-rule-required="true" value="{$info['keyname']}"><span class="maroon">*</span>
                                </div>
                            </div>

                            <div class="control-group" id="textreply">
                                <label class="control-label" for="reply">回复内容:</label>
                                <div class="controls">
                                    <div id="content-panel">
                                        <?php if(isset($info)):?>
                                        <?php if($info['wechat_contents']['contenttype']=='text'):?>
                                        <div class="imgEdit" id="imgEdit">
                                            <div  id="item_0">
                                                <div class="time"><?php echo date('Y-m-d',strtotime($info['addtime']))?></div>
                                                <div class="des" style="">{$info['wechat_contents']['content']}</div>
                                            </div>
                                        </div><br />
                                        <?php endif;?>
                                        <?php if($info['wechat_contents']['contenttype']=='news'):?>
                                        <?php $item_con=json_decode($info['wechat_contents']['content']);?>
                                        <?php if(count($item_con)==1):?>
                                        <div class="imgEdit" id="imgEdit">
                                            <div  id="item_0">
                                                <div class="caption div_caption" ><?php echo $item_con[0]->detailtitle;?> </div>
                                                <div class="time"><?php echo date('Y-m-d',strtotime($info['addtime']))?></div>
                                                <div class="img">
                                                    <div class="coverImg">
                                                        <img  src="<?php echo $item_con[0]->detaillogo;?>" />
                                                    </div>
                                                </div>
                                                <div class="des"><?php echo $item_con[0]->detailintro;?></div>
                                            </div>
                                        </div><br />
                                        <?php endif;?>
                                        <?php if(count($item_con)>1):?>
                                        <div class="imgsEdit" id="imgsEdit">
                                            <div class="time"><?php echo date('Y-m-d',strtotime($info['addtime']))?></div>
                                            <div class="img" id="item_0">
                                                <div class="coverImg"><img src="<?php echo $item_con[0]->detaillogo;?>"/></div>
                                                <div class="caption" style=" ">
                                                    <span  class="div_caption" ><?php echo $item_con[0]->detailtitle;?> </span>
                                                </div>
                                            </div>
                                            <ul class="unstyled">
                                                <?php for($i=1;$i<count($item_con);$i++){?>
                                                <li class="item">
                                                    <div class="caption div_caption"><?php echo $item_con[$i]->detailtitle;?>  </div>
                                                    <div class="itemImg coverImg"><img src="<?php echo $item_con[$i]->detaillogo;?>"/></div>
                                                    <div class="div_content hide"></div>
                                                </li>
                                                <?php }?>
                                            </ul>
                                        </div><br />
                                        <?php endif;?>
                                        <?php endif;?>
                                        <?php endif;?>
                                    </div>
                                    <a class="btn " href="javascript:selcontents();"><i class="icon-plus"></i>选择回复素材</a>

                                </div>
                            </div>


                            <div class="form-actions">
                                <input type="hidden" name="rid" id="rid" value="{$rid}">
                                <input type="hidden" name="rtype" id="rtype" value="textkey">
                                <input type="hidden" name="action" id="action" value="{$action}">
                                <input type="hidden" name="aid" id="aid" value="{$aid}">
                                <input type="hidden" name="cid" id="cid" value="{$info['contentid']}">
                                <button type="submit" class="btn btn-primary"  id ="bsubmit">保存</button>
                                <a class="btn hide" href="javascript:godebug();">godebug</a>
                            </div>

                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<script>
    function godebug(){
        alert($('#cid').val());
    }
    $(function () {
        $('#bsubmit').click(function(){
            var keyname=$('#keyname').val();
            if(keyname==''){
                alert('关键词不能为空！');
                //e.preventDefault();
                return false;
            }
            var cid=$('#cid').val();
            if(cid==''){
                alert('请选择回复内容！');
                //e.preventDefault();
                return false;
            }
        })
    })
</script>



<style type="text/css">
    #myModal {
        /* SET THE WIDTH OF THE MODAL 设置Modal的宽度*/
        width: 900px;
        /* CHANGE MARGINS TO ACCOMODATE THE NEW WIDTH (original = margin: -250px 0 0 -280px;) */
        margin: 0px 0 0 -450px;
    }
    .con-masonry {
        list-style-type: none;
        margin: 0 auto;
    }
    .con-masonry .item_news {
        width: 350px;
        margin: 5px;
    }
</style>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-header">
    <button class="close" type="button" data-dismiss="modal">×</button>    <h3>选择素材</h3>
</div>
<div class="modal-body">

    <iframe id='iframe01' style="zoom: 0.6;overflow-x:hidden; display:none;" src="" frameBorder="0" marginheight="0" marginwidth="0" width="99.8%" height="600"></iframe>
    <ul class="nav nav-tabs" id="myTab">
        <li><a href="#replytext" data-toggle="tab" data-type="text">文本素材</a></li>
        <li><a href="#replynews" data-toggle="tab" data-type="news">图文素材</a></li>
    </ul>
    <div class="tab-content dataTables_wrapper">
        <div class="tab-pane  active" id="replytext">
            <div class="con-masonry"  >

            </div>
        </div>
        <div class="tab-pane" id="replynews">
            <div class="con-masonry"  >


            </div>
        </div>
        <div  class="dataTables_paginate paging_full_numbers " id="pagination"></div>
    </div>

</div>
<div class="modal-footer hide">
    <button class="btn btn-primary" data-dismiss="modal">确定</button>
</div>
<script type="text/javascript">
    Emotion.url='__PUBLIC__img/face/';
    $(function () {
        $('.des').each(function(){
            var c=$(this).html();
            c=Emotion.replaceEmoji(c);
            c=c.replace(/&lt;/gi, "<").replace(/&gt;/gi, ">");
            $(this).html(c);
        })
    })
    var type='text';
    var isinitpage=true;
    $(function () {
        $('#myTab a:first').tab('show');

        $('a[data-toggle="tab"]').on('shown', function (e) {
            type=$(this).attr('data-type');
            isinitpage=true;
            get_contents(type,0);
            //e.target;
            //alert(e.target); // activated tab
            //e.relatedTarget; // previous tab
        })
        $('#myModal').on('shown', function () {
            // do something…
            get_contents(type,0);
            //getcontent();
        })
    })
    function selcontents(){
        $('#myModal').modal('show');

    }
    function getcontent(){
        $('.con-masonry').masonry({
            // options
            itemSelector : '.item_news',
            columnWidth : 390,//一列的宽度 Integer
            isFitWidth: true,// 适应宽度
            gutterWidth :10,//列的间隙
            isResizableL:true, // 是否可调整大小
            transitionDuration:0,//过渡时间
            isRTL:false//使用从右到左的布局
        });
    }
</script>
<script type="text/javascript">
    //加载数据
    function get_contents(type,page){
        page=page+1;
        var opts={aid:'{$aid}',type:type,page:page};
        console.log(opts);
        $.get("{:U('Admin/Wechat/selcontent')}?t="+new Date().getTime(),opts,function(data){

            if(isinitpage){
                initPagination(data.totlecount);
                isinitpage=false;
            }
            //alert(data.totlecount);
            //载入数据
            if(type=='news'){
                $('#replynews .con-masonry').empty();
                $('#replynews .con-masonry').masonry('reload');
                if(data.totlecount==0){
                    $('#replynews .con-masonry').append('没有图文素材');
                }
            }else{
                $('#replytext .con-masonry').empty();
                $('#replytext .con-masonry').masonry('reload');
                if(data.totlecount==0){
                    $('#replytext .con-masonry').append('没有文本素材');
                }
            }
            $.each(data.list,function(index,item){
                var str='';
                if(type=='news'){
                    var conitem=eval("("+item.content+")");//内容转换为json对象
                    //单图文
                    if(conitem.length==1){
                        str+='<div class="item_news">'
                        +'<div class="imgEdit " id="imgEdit">'
                        +' <div  id="item_0">'
                        +'  <div class="caption div_caption" >'+conitem[0].detailtitle+' </div>'
                        +' <div class="time">'+item.addtime+'</div>'
                        +'<div class="img"><div class="coverImg">'
                        +' <img  src="'+conitem[0].detaillogo+'" />'
                        +'</div></div>'
                        +'<div class="des">'+conitem[0].detailintro+'</div></div>'
                        +'<div class="clearfix">'
                        +'<a class="btn btn-primary selcontent" data-cid="'+item.contentid+'" style="width:300px" title="选择此素材"><i class="icon-ok"></i></a>'
                        +' </div></div></div>';
                    }else{
                        //多图文
                        str+='<div class="item_news">'
                        +' <div class="imgsEdit " id="imgsEdit">'
                        +'                     <div class="time">'+item.addtime+'</div>'
                        +'                    <div class="img" id="item_0">'
                        +'                        <div class="coverImg"><img src="'+conitem[0].detaillogo+'"/></div>'
                        +'                        <div class="caption" style=" ">'
                        +'                            <span  class="div_caption" >'+conitem[0].detailtitle+' </span>'
                        +'                       </div>'
                        +'                   </div>'
                        +'                   <ul class="unstyled">';
                        for(var i=1;i<conitem.length;i++){
                            str+='    <li class="item">'
                            +'       <div class="caption div_caption">'+conitem[i].detailtitle+' </div>'
                            +'     <div class="itemImg coverImg"><img src="'+conitem[i].detaillogo+'"/></div>'
                            +'     <div class="div_content hide"></div>'
                            +' </li>';
                        }
                        str+='     </ul> ';
                        str+='<div class="clearfix">'
                        +'<a class="btn btn-primary selcontent" data-cid="'+item.contentid+'"  style="width:300px" title="选择此素材"><i class="icon-ok"></i></a>'
                        +' </div></div>  </div>';
                    }
                    var $boxes =$(str);
                    $('#replynews .con-masonry').append($boxes).masonry('appended', $boxes, true);
                }else{
                    var c=Emotion.replaceEmoji(item.content);
                    c=c.replace(/&lt;/gi, "<").replace(/&gt;/gi, ">");
                    str+='<div class="item_news">'
                    +'                <div class="imgEdit" id="imgEdit">'
                    +'                        <div  id="item_0">'
                    +'                            <div class="time">'+item.addtime+'</div>'
                    +'                            <div class="des" style="">'+c+'</div>   '
                    +' </div> '
                    +'<br /><div class="clearfix">'
                    +'<a class="btn btn-primary selcontent" data-cid="'+item.contentid+'"  style="width:300px" title="选择此素材"><i class="icon-ok"></i></a>'
                    +' </div></div>  </div>';
                    var $boxes =$(str);
                    $('#replytext .con-masonry').append($boxes).masonry('appended', $boxes, true);
                }
            });
            getcontent();
        },'json');

    }

    function initPagination(num_entries){
        //渲染分页
        $('#pagination').pagination(num_entries, {
            current_page : 0,
            items_per_page : 10,
            num_display_entries : 3,
            callback : function(page_id){
                //模拟ajax去后端读取页数，获取数据并渲染列表的过程
                /*$('#list-content').html('');
                 for(var i = 0; i < 10; i++){
                 $('#list-content').append('<tr><td>' + arr[page_id * 10 + i].number + '</td><td>' + arr[page_id * 10 + i]._date + '</td></tr>');
                 }*/
                get_contents(type,page_id);
            },
            prev_text : '上一页',
            next_text : '下一页'
        });
    }
    $(function () {
        $('.selcontent').live('click',function(){
            var cid=$(this).attr('data-cid');
            var aid='{$aid}';
            var rtype='textkey';
            $.get("{:U('Admin/Wechat/getcontent')}",{type:rtype,aid:aid,cid:cid},function(data){
                $('#myModal').modal('hide');
                $('#cid').val(cid);
                var str='';
                var item=data;
                if(data.contenttype=='news'){
                    var conitem=eval("("+item.content+")");//内容转换为json对象
                    if(conitem.length==1){
                    //单图文
                        str+='<div class="item_news">'
                        +'<div class="imgEdit " id="imgEdit">'
                        +' <div  id="item_0">'
                        +'  <div class="caption div_caption" >'+conitem[0].detailtitle+' </div>'
                        +' <div class="time">'+item.addtime+'</div>'
                        +'<div class="img"><div class="coverImg">'
                        +' <img  src="'+conitem[0].detaillogo+'" />'
                        +'</div></div>'
                        +'<div class="des">'+conitem[0].detailintro+'</div></div>'
                        +' </div></div>';
                    }else{
                    //多图文
                        str+='<div class="item_news">'
                        +' <div class="imgsEdit " id="imgsEdit">'
                        +'                     <div class="time">'+item.addtime+'</div>'
                        +'                    <div class="img" id="item_0">'
                        +'                        <div class="coverImg"><img src="'+conitem[0].detaillogo+'"/></div>'
                        +'                        <div class="caption" style=" ">'
                        +'                            <span  class="div_caption" >'+conitem[0].detailtitle+' </span>'
                        +'                       </div>'
                        +'                   </div>'
                        +'                   <ul class="unstyled">';
                        for(var i=1;i<conitem.length;i++){
                            str+='    <li class="item">'
                            +'       <div class="caption div_caption">'+conitem[i].detailtitle+' </div>'
                            +'     <div class="itemImg coverImg"><img src="'+conitem[i].detaillogo+'"/></div>'
                            +'     <div class="div_content hide"></div>'
                            +' </li>';
                        }
                        str+='     </ul> ';
                        str+=' </div>  </div>';
                    }
                }else{
                    var c=Emotion.replaceEmoji(item.content);
                    c=c.replace(/&lt;/gi, "<").replace(/&gt;/gi, ">");
                    str+='<div class="item_news">'
                    +'                <div class="imgEdit" id="imgEdit">'
                    +'                        <div  id="item_0">'
                    +'                            <div class="time">'+item.addtime+'</div>'
                    +'                            <div class="des" style="">'+c+'</div>   '
                    +' </div> '
                    +' </div>  </div>';
                }
                str+='<br />';
                $('#content-panel').html(str);
            },'json');
        })
    })
</script>
</div>


</body>
</html>
